<template>
	<view class="margin-sm">
		<use-navbar title="创建订单"></use-navbar>
		<view class="use-area">
			<view class="dflex-b line-height-item">
				<view class="">{{ comboDatas.title }}</view>
			</view>
		</view>
		<view class="goods-area use-area">
			<!-- 商品列表 -->
			<view v-for="(item, idx) in comboDatas.goods" :key="idx" class="goods-item"
				:class="{ 'margin-top': idx > 0 }">
				<view class="pos-r">
					<image mode="aspectFill" :src="item.img" class="dflex-c border-radius-sm"></image>
				</view>
				<view class="flex1 padding-left-sm">
					<view class="dflex">
						<text class="title clamp-2">{{ item.name || '' }} {{ item.name_pw || '' }}</text>
					</view>
					<view class="pos-r dflex-b padding-top">
						<view class="dflex">
							<view class=" flex1">数量{{ item.stock_num }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 金额明细 -->
		<view class="use-area">
			<view class="dflex-b line-height-item">
				<view class="flex1">总金额</view>
				<view class=""><text style="font-size: 24rpx;">￥</text>{{ comboDatas.price }}</view>
			</view>
		</view>

		<view class="use-area">
			<view class="margin-right-xl">备注</view>
			<textarea class="bg-drak w-full border-radius-sm margin-top-sm padding" style="min-height: 70px;"
				v-model="order_desc" maxlength="200" auto-height placeholder="请填写买家备注"></textarea>
		</view>

		<view class="gap"></view>

		<!-- 底部  -->
		<view class="oper-area pos-f pos-b-full w-full dflex-b bg-main safe-area-inset-bottom padding-lr-sm">
			<view>
				<text class="fs-sm">实付款</text>
				<text class="price margin-left-sm fs-xl">{{ comboDatas.price }}</text>
			</view>
			<view class="submit dflex-c border-radius-big padding-lr animated-all"
				:class="isubmit ? 'use-loading' : 'bg-base'" @click="submit">{{ !isubmit ? '提交订单' : '' }}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['islogin', 'member']),
		},
		data() {
			return {
				// 商品数据
				comboDatas: [],
				// 商品 id
				combo_id: 0,
				// 买家备注
				order_desc: '',
				isubmit: 0
			};
		},
		onLoad(options) {

			// 商品 ids
			this.combo_id = options.id || '';

			// 加载商品数据
			this.loadData();
		},
		onShow() {

		},
		methods: {
			// 加载数据
			loadData() {
				this.$func.wmzmall.call('combo/detail', {
					_id: this.combo_id
				}).then(res => {
					if (res.code == 200) {
						this.comboDatas = res.datas.data
						console.log(this.comboDatas)
					}
				});
			},

			// 提交订单
			submit() { 
				if (this.isubmit) {
					this.$api.msg('提交中');
					return;
				}
				this.isubmit = 1;

				let obj = {
					combo_id: this.combo_id,
					order_desc: this.order_desc 
				};
				this.$func.wmzmall.call('order/createCombo', obj).then(res => {
					if (res.code === 200) {
						// 跳转支付页
						this.$api.topay({
							order_id: res.datas.order_id,
							money: res.datas.money,
							type: 'redirect'
						});
						return;
					}

					this.$api.alert(res.msg);
					this.$api.timerout(() => {
						this.isubmit = 0;
					}, 800);
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100rpx;
	}



	.goods-area {
		.goods-item {
			display: flex;

			.title {
				height: 72rpx;
			}

			.disabled {
				color: #fff !important;
				width: 70%;
				height: 70%;
				background-color: rgba(51, 51, 51, 0.5);
			}

			image {
				flex-shrink: 0;
				width: 180rpx;
				height: 180rpx;
			}
		}
	}

	.oper-area {
		z-index: 998;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		height: 100rpx;
		height: calc(env(safe-area-inset-bottom) + 100upx);

		.submit {
			height: 66rpx;
		}
	}
</style>